<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<!--定义公共部分-->
<div th:fragment="header">
    <!--Header-->
    <div class="topheader">
        <div class="container">
            <div class="row">
                <div class="col-10 col-sm-8 col-md-5 col-lg-4">
                    <div class="currency-picker">
                        <span class="selected-currency">USD</span>
                        <ul id="currencies" class="currencyList">
                            <li data-currency="INR" class="">INR</li>
                            <li data-currency="GBP" class="">GBP</li>
                            <li data-currency="CAD" class="">CAD</li>
                            <li data-currency="USD" class="selected">USD</li>
                            <li data-currency="AUD" class="">AUD</li>
                            <li data-currency="EUR" class="">EUR</li>
                            <li data-currency="JPY" class="">JPY</li>
                        </ul>
                    </div>
                    <div class="language-dropdown">
                        <span class="language-dd">English</span>
                        <ul id="language" class="languageList">
                            <li class="lug">German</li>
                            <li class="lug">French</li>
                            <li class="lug">Spanish</li>
                            <li class="lug">German</li>
                        </ul>
                    </div>
                    <p class="phone-no"><a href=""><i class="an an-phone"></i> <span>+440 0(111) 044 833</span></a></p>
                </div>
                <div class="col-sm-4 col-md-5 col-lg-4 d-none d-md-block d-lg-block">
                    <div class="text-center">
                        <p class="default-msg">FREE Shipping ON ORDER ABOVE $99</p>
                    </div>
                </div>
                <div class="col-2 col-sm-4 col-md-2 col-lg-4 text-right">
                    <div class="myaccount-links">
                        <span class="user-menu d-block d-lg-none"><i class="an an-user"></i></span>
                        <ul class="customer-links list-inline">
                            <li>
                                <a th:href="@{/checkout}">Checkout</a>
                            </li>
                            <li>
                                <a th:href="@{/my-account}" th:text="${currentUser==null?'My Account':(currentUser.username ?: 'My Account')}">My Account</a>
                            </li>
                            <li>
                                <a th:if="${currentUser==null}" th:href="@{/user/login}">Sign in</a>
                                <a th:unless="${currentUser==null}" id="logout-btn" href="javascript:void(0)">Logout</a>
                                <span th:if="${currentUser==null}">/</span>
                                <a th:if="${currentUser==null}" th:href="@{/user/register}">Register</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <header class="header header-1">
        <div class="container">
            <div class="row d-flex align-items-center pt-3 pb-3">
                <!--Mobile Icons-->
                <div class="col-3 col-sm-4 col-md-4 d-block d-lg-none mobile-icons">
                    <!--Mobile Toggle-->
                    <button type="button" class="btn--link site-header__menu js-mobile-nav-toggle mobile-nav--open">
                        <i class="icon an an-times"></i>
                        <i class="an an-bars"></i>
                    </button>
                    <!--End Mobile Toggle-->
                    <!--Search-->
                    <div class="site-search iconset">
                        <i class="icon anb an-sistrix"></i>
                    </div>
                    <!--End Search-->
                </div>
                <!--Mobile Icons-->
                <!--Desktop Logo-->
                <div class="logo col-6 col-sm-4 col-md-4 col-lg-3 align-self-center">
                    <a href="index.html">
                        <img src="assets/images/logo.png" alt="Shoplook Multipurpose eCommerce Bootstrap5 Html Template"
                             title="Shoplook Multipurpose eCommerce Bootstrap5 Html Template"/>
                    </a>
                </div>
                <!--End Desktop Logo-->
                <div class="col-1 col-sm-1 col-md-1 col-lg-6 align-self-center d-menu-col">
                    <div class="header-search">
                        <form class="form minisearch" action="#" method="get">
                            <label class="label"><span>Search</span></label>
                            <div class="control">
                                <div class="searchField d-flex justify-content-between">
                                    <div class="search-category">
                                        <select>
                                            <option value="0">All Categories</option>
                                            <option value="4">Shop</option>
                                            <option value="6">- All</option>
                                            <option value="8">- Men</option>
                                            <option value="10">- Women</option>
                                            <option value="12">- Shoes</option>
                                            <option value="14">- Blouses</option>
                                            <option value="16">- Pullovers</option>
                                            <option value="18">- Bags</option>
                                            <option value="20">- Accessories</option>
                                        </select>
                                    </div>
                                    <div class="input-box">
                                        <input type="text" name="q" value=""
                                               placeholder="Search for products, brands..." class="input-text">
                                        <button type="submit" title="Search" class="action search" disabled=""><i
                                                class="icon anb an-sistrix"></i></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-3 col-sm-4 col-md-4 col-lg-3 align-self-center icons-col text-right">
                    <!--Search-->
                    <div class="search-drawer">
                        <div class="container">
                            <span class="closeSearch an an-times"></span>
                            <h3 class="title">What are you looking for?</h3>
                            <div class="block block-search">
                                <div class="block block-content">
                                    <form class="form minisearch" action="#" method="get">
                                        <label class="label"><span>Search</span></label>
                                        <div class="control">
                                            <div class="searchField">
                                                <div class="search-category">
                                                    <select>
                                                        <option value="0">All Categories</option>
                                                        <option value="4">Shop</option>
                                                        <option value="6">- All</option>
                                                        <option value="8">- Men</option>
                                                        <option value="10">- Women</option>
                                                        <option value="12">- Shoes</option>
                                                        <option value="14">- Blouses</option>
                                                        <option value="16">- Pullovers</option>
                                                        <option value="18">- Bags</option>
                                                        <option value="20">- Accessories</option>
                                                    </select>
                                                </div>
                                                <div class="input-box">
                                                    <input type="text" name="q" value=""
                                                           placeholder="Search for products, brands..."
                                                           class="input-text">
                                                    <button type="submit" title="Search" class="action search"
                                                            disabled=""><i class="icon anb an-sistrix"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Search-->
                    <!--Compare-->
                    <div class="wishlist-link iconset">
                        <a href="compare-style2.html">
                                    <span class="icon-in">
                                        <i class="icon an an-balance-scale"></i>
                                        <span class="compare-count">0</span>
                                    </span>
                            <span class="label">Compare</span>
                        </a>
                    </div>
                    <!--End Compare-->
                    <!--Wishlist-->
                    <div class="wishlist-link iconset">
                        <a th:href="@{/my-favorites}">
                                    <span class="icon-in">
                                        <i class="icon an an-heart-o"></i>
                                        <span class="wishlist-count">0</span>
                                    </span>
                            <span class="label">Favorites</span>
                        </a>
                    </div>
                    <!--End Wishlist-->
                    <!--Minicart Dropdown-->
                    <div class="header-cart iconset">
                        <a href="#" class="site-header__cart btn-minicart" data-bs-toggle="modal"
                           data-bs-target="#minicart-drawer">
                            <div class="icon-in">
                                <i class="icon an an-shopping-cart"></i>
                                <span class="site-cart-count">3</span>
                            </div>
                            <div class="label">Your Cart</div>
                        </a>
                    </div>
                    <!--End Minicart Dropdown-->
                </div>
            </div>
        </div>
        <div class="main-menu">
            <div class="container">
                <div class="row d-flex align-items-center">
                    <div class="col-4 col-sm-4 col-md-4 col-lg-3 pr-0">
                        <div class="header-vertical-menu">
                            <h4 class="menu-title"><i class="an an-align-left"></i> <span>Browse Categories</span></h4>
                            <div class="vertical-menu-content av_cat navbar collapse">
                                <ul>
                                    <li th:class="${cat.children!=null && cat.children.size()>0?'has-submenu dropdown-in':''}"
                                        th:each="cat:${categories}">
                                        <a th:href="@{/goods(categoryId=${cat.id})}" class="nav-link">
                                            <i th:class="${cat.icon ?: 'an an-tag'}"></i> [[${cat.name}]]
                                        </a>

                                        <ul th:if="${cat.children!=null && cat.children.size()>0}"
                                            class="dropdown sub-level1">
                                            <!--二级分类-->
                                            <li th:class="${secCat.children!=null && secCat.children.size()>0?'sub-menu':''}"
                                                th:each="secCat:${cat.children}">
                                                <a th:href="@{/goods(categoryId=${secCat.id})}"
                                                   th:text="${secCat.name}">Footwear</a>

                                                <ul th:if="${secCat.children!=null && secCat.children.size()>0}"
                                                    class="dropdown sub-level2">
                                                    <li th:each="thiCat:${secCat.children}">
                                                        <a th:href="@{/goods(categoryId=${thiCat.id})}"
                                                           th:text="${thiCat.name}">Backpacks</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>


                                </ul>
                                <div class="moreCategories">View All Categories</div>
                            </div>
                        </div>
                    </div>
                    <!--Desktop Menu-->
                    <div class="col-4 col-sm-4 col-md-4 col-lg-9">
                        <nav class="grid__item" id="AccessibleNav">
                            <ul id="siteNav" class="site-nav medium">
                                <li class="lvl1 parent dropdown"><a th:href="@{/}">Home</a></li>
                                <li class="lvl1 parent megamenu Cfull"><a th:href="@{/goods}">Products</a></li>
                                <li class="lvl1 parent dropdown"><a th:href="@{/brands}">Brands</a></li>
                                <li class="lvl1 parent megamenu"><a th:href="@{/cart}">Cart</a></li>
                                <li class="lvl1 parent dropdown" th:if="${currentUser != null}"><a th:href="@{/my-account}">My Account</a>
                                    <ul class="dropdown">
                                        <li><a th:href="@{/my-account}" class="site-nav">Dashboard</a></li>
                                        <li><a th:href="@{/my-orders}" class="site-nav">My Orders</a></li>
                                        <li><a th:href="@{/my-favorites}" class="site-nav">My Favorites</a></li>
                                        <li><a th:href="@{/my-addresses}" class="site-nav">Addresses</a></li>
                                        <li><a th:href="@{/personal-data}" class="site-nav">Personal Data</a></li>
                                        <li><a th:href="@{/notifications}" class="site-nav">Notifications</a></li>
                                    </ul>
                                </li>
                                <li class="lvl1 parent dropdown"><a href="#">More <i class="an an-angle-down"></i></a>
                                    <ul class="dropdown">
                                        <li><a th:href="@{/login}" class="site-nav" th:if="${currentUser == null}">Login</a></li>
                                        <li><a th:href="@{/register}" class="site-nav" th:if="${currentUser == null}">Register</a></li>
                                        <li><a href="aboutus-style1.html" class="site-nav">About Us <i
                                                class="an an-angle-right"></i></a>
                                            <ul class="dropdown">
                                                <li><a href="aboutus-style1.html" class="site-nav">About Us Style1</a>
                                                </li>
                                                <li><a href="aboutus-style2.html" class="site-nav">About Us Style2</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="contact-style1.html" class="site-nav">Contact Us <i
                                                class="an an-angle-right"></i></a>
                                            <ul class="dropdown">
                                                <li><a href="contact-style1.html" class="site-nav">Contact Us Style1</a>
                                                </li>
                                                <li><a href="contact-style2.html" class="site-nav">Contact Us Style2</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="faqs-style1.html" class="site-nav">FAQs <i
                                                class="an an-angle-right"></i></a>
                                            <ul class="dropdown">
                                                <li><a href="faqs-style1.html" class="site-nav">FAQs Style1</a></li>
                                                <li><a href="faqs-style2.html" class="site-nav">FAQs Style2</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="cms.html" class="site-nav">CMS</a></li>
                                        <li><a href="error-404.html" class="site-nav">Error 404</a></li>
                                        <li><a href="coming-soon.html" class="site-nav">Coming soon <span
                                                class="lbl nm_label1">New</span> </a></li>
                                    </ul>
                                </li>
                                <li class="lvl1 parent dropdown"><a href="#">Blog <i class="an an-angle-down"></i></a>
                                    <ul class="dropdown">
                                        <li><a href="blog-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
                                        <li><a href="blog-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
                                        <li><a href="blog-fullwidth.html" class="site-nav">Fullwidth</a></li>
                                        <li><a href="blog-2columns.html" class="site-nav">2 Columns <span
                                                class="lbl nm_label3">Hot</span></a></li>
                                        <li><a href="blog-3columns.html" class="site-nav">3 Columns</a></li>
                                        <li><a href="blog-4columns.html" class="site-nav">4 Columns</a></li>
                                        <li><a href="blog-single-post.html" class="site-nav">Single Post</a></li>
                                    </ul>
                                </li>
                                <li class="lvl1"><a href="#;">Buy Now!</a></li>
                            </ul>
                        </nav>
                    </div>
                    <!--End Desktop Menu-->
                </div>
            </div>
        </div>
    </header>
    <!--End Header-->
    <!--Mobile Menu-->
    <div class="mobile-nav-wrapper" role="navigation">
        <div class="closemobileMenu"><i class="icon an an-times pull-right"></i> Close Menu</div>
        <ul id="MobileNav" class="mobile-nav">
            <li class="lvl1 parent vm-megamenu">
                <a href="#" class="site-nav">Browse Categories <i class="an an-plus"></i></a>
                <ul>
                    <li class="has-submenu"><a href="#" class="site-nav"><i class="vm-icon an an-tshirt"></i> Fashion <i
                            class="an an-plus"></i></a>
                        <ul class="megamenu">
                            <li>
                                <h4 class="sub-menu-title">Women's <i class="an an-plus"></i></h4>
                                <ul>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">New Arrivals</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Best Sellers</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Trending</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Clothing</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Shoes</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Bags</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Accessories</a>
                                    </li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Jewlery &amp; Watches</a>
                                    </li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Sale</a></li>
                                </ul>
                            </li>
                            <li>
                                <h4 class="sub-menu-title">Men's <i class="an an-plus"></i></h4>
                                <ul>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">New Arrivals</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Best Sellers</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Trending</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Clothing</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Shoes</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Bags</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Accessories</a></li>
                                    <li><a href="shop-right-sidebar.html" class="site-nav">Jewlery &amp; Watches</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div class="banner-fixed menu-banner menu-banner2">
                                    <figure>
                                        <img src="assets/images/megamenu-banner3.jpg" alt="Menu Banner" width="340"
                                             height="300">
                                    </figure>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#" class="site-nav"><i class="vm-icon an an-tv"></i> Electronics <i
                            class="an an-plus"></i></a>
                        <ul class="megamenu type2">
                            <li class="row">
                                <div class="col-md-3 col-lg-3 col-6">
                                    <h4 class="sub-menu-title">Accessories <i class="an an-plus"></i></h4>
                                    <ul>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Jackets</a></li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Dresses</a></li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Blouses &amp; Tops</a>
                                        </li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Skirts</a>
                                        </li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Outerwear</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-3 col-lg-3 col-6">
                                    <h4 class="sub-menu-title">Pullovers <i class="an an-plus"></i></h4>
                                    <ul>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Pants &amp; Shorts</a>
                                        </li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Outerwear</a></li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Skirts</a>
                                        </li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Blouses</a>
                                        </li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Dresses</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-3 col-lg-3 col-6">
                                    <h4 class="sub-menu-title">Handbags <i class="an an-plus"></i></h4>
                                    <ul>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Jeans</a></li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Blazers</a></li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Bracelet</a>
                                        </li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Bedding Set</a></li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Bodysuit</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-3 col-lg-3 col-6">
                                    <h4 class="sub-menu-title">Dress Material <i class="an an-plus"></i></h4>
                                    <ul>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Dupatta</a></li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Doormats</a>
                                        </li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Diwan Set</a></li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Dhotis</a></li>
                                        <li><a href="shop-right-sidebar.html" class="site-nav">Face Towels</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="row">
                                <div class="col-6">
                                    <div class="banner banner-fixed menu-banner5 br-xs">
                                        <figure>
                                            <img src="assets/images/megamenu-banner4.jpg" alt="Banner" width="400"
                                                 height="150">
                                        </figure>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="banner banner-fixed menu-banner5 br-xs">
                                        <figure>
                                            <img src="assets/images/megamenu-banner4.jpg" alt="Banner" width="400"
                                                 height="150">
                                        </figure>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="has-submenu dropdown-in"><a href="#" class="nav-link"><i class="vm-icon an an-bed"></i>
                        Furniture <i class="an an-plus"></i></a>
                        <ul class="dropdown sub-level1">
                            <li><a href="#;" class="site-nav">Accessories</a></li>
                            <li class="sub-menu"><a href="#;" class="site-nav">Footwear <i class="an an-plus"></i></a>
                                <ul class="dropdown sub-level2">
                                    <li><a href="#;" class="site-nav">Backpacks</a></li>
                                    <li><a href="#;" class="site-nav">Wallets</a></li>
                                    <li><a href="#;" class="site-nav">Belts</a></li>
                                    <li><a href="#;" class="site-nav">Sunglasses</a></li>
                                </ul>
                            </li>
                            <li><a href="#;" class="site-nav">Bottom wear</a></li>
                            <li><a href="#;" class="site-nav">Cargos</a></li>
                            <li><a href="#;" class="site-nav">Track pants</a></li>
                            <li><a href="#;" class="site-nav">Winter wear</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="site-nav"><i class="vm-icon an an-radiation-alt"></i> Cosmetics &amp; Beauty</a>
                    </li>
                    <li><a href="#" class="site-nav"><i class="vm-icon an an-camera"></i> Digital Camera</a></li>
                    <li><a href="#" class="site-nav"><i class="vm-icon an an-socks"></i> Shoes</a></li>
                    <li><a href="#" class="site-nav"><i class="vm-icon an an-stopwatch"></i> Watches</a></li>
                    <li><a href="#" class="site-nav"><i class="vm-icon an an-gg-circle"></i> Jewellery</a></li>
                    <li><a href="#" class="site-nav"><i class="vm-icon an an-heart-obeat"></i> Health &amp; Beauty</a>
                    </li>
                    <li><a href="#" class="site-nav"><i class="vm-icon an an-skating"></i> Sports</a></li>
                    <li><a href="#" class="site-nav"><i class="vm-icon an an-gift"></i> Gift Ideas</a></li>
                    <li>
                        <ul class="moreSlideOpen">
                            <li><a class="site-nav" href="#"><i class="vm-icon an an-hand-holding-heart"></i> Health
                                Care</a></li>
                            <li><a class="site-nav" href="#"><i class="vm-icon an an-gamepad"></i> Toys &amp; Game</a>
                            </li>
                            <li><a class="site-nav" href="#"><i class="vm-icon an an-mobile-alt"></i> Smart Phones</a>
                            </li>
                            <li><a class="site-nav" href="#"><i class="vm-icon an an-tshirt"></i> Clothing</a></li>
                        </ul>
                    </li>
                    <li class="moreCategories"><a href="#" class="nav-link">View All Categories <i
                            class="an an-plus"></i></a></li>
                </ul>
            </li>
            <li class="lvl1 parent megamenu"><a href="index.html">Home <i class="an an-plus"></i></a>
                <ul>
                    <li><a href="index.html" class="site-nav">Home 01 <span class="lbl nm_label3">Hot</span></a></li>
                    <li><a href="index-demo2.html" class="site-nav">Home 02</a></li>
                    <li><a href="index-demo3.html" class="site-nav">Home 03</a></li>
                    <li><a href="index-demo4.html" class="site-nav">Home 04</a></li>
                    <li><a href="index-demo5.html" class="site-nav">Home 05 <span class="lbl nm_label3">Hot</span></a>
                    </li>
                    <li><a href="index-demo6.html" class="site-nav">Home 06</a></li>
                    <li><a href="index-demo7.html" class="site-nav">Home 07</a></li>
                    <li><a href="index-demo8.html" class="site-nav">Home 08</a></li>
                    <li><a href="index-demo9.html" class="site-nav">Home 09</a></li>
                </ul>
            </li>
            <li class="lvl1 parent megamenu"><a href="#">Shop <i class="an an-plus"></i></a>
                <ul>
                    <li><a href="#" class="site-nav">Category Page<i class="an an-plus"></i></a>
                        <ul>
                            <li><a href="category-2columns.html" class="site-nav">2 Columns with style1</a></li>
                            <li><a href="category-3columns.html" class="site-nav">3 Columns with style2</a></li>
                            <li><a href="category-4columns.html" class="site-nav">4 Columns with style3</a></li>
                            <li><a href="category-5columns.html" class="site-nav">5 Columns with style4</a></li>
                            <li><a href="category-6columns.html" class="site-nav">6 Columns with Fullwidth</a></li>
                            <li><a href="category-7columns.html" class="site-nav">7 Columns</a></li>
                            <li><a href="category-empty.html" class="site-nav last">Category Empty</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="site-nav">Shop Page<i class="an an-plus"></i></a>
                        <ul>
                            <li><a href="shop-list-view.html" class="site-nav">List View</a></li>
                            <li><a href="shop-category-slideshow.html" class="site-nav">Category Slideshow</a></li>
                            <li><a href="shop-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
                            <li><a href="shop-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
                            <li><a href="shop-fullwidth.html" class="site-nav">Fullwidth/No Sidebar</a></li>
                            <li><a href="shop-no-sidebar.html" class="site-nav">No Sidebar/No Filter</a></li>
                            <li><a href="shop-category-slideshow.html" class="site-nav last">With category
                                description</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="site-nav">Shop Page<i class="an an-plus"></i></a>
                        <ul>
                            <li><a href="shop-left-sidebar.html" class="site-nav">Simple Heading</a></li>
                            <li><a href="shop-small-heading.html" class="site-nav">Small Heading</a></li>
                            <li><a href="shop-no-sidebar.html" class="site-nav">Big Heading With Image</a></li>
                            <li><a href="shop-right-sidebar.html" class="site-nav">Headings With Banner#1</a></li>
                            <li><a href="shop-heading-with-banner2.html" class="site-nav2">Headings With Banner#2</a>
                            </li>
                            <li><a href="swatches-style.html" class="site-nav">Swatches Style</a></li>
                            <li><a href="classic-pagination.html" class="site-nav last">Classic Pagination</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="site-nav">Shop Other Page<i class="an an-plus"></i></a>
                        <ul>
                            <li><a href="my-wishlist.html" class="site-nav">My Wishlist</a></li>
                            <li><a href="cart-style1.html" class="site-nav">Cart Page Style1</a></li>
                            <li><a href="cart-style2.html" class="site-nav">Cart Page Style2</a></li>
                            <li><a href="checkout-style1.html" class="site-nav">Checkout Page Style1</a></li>
                            <li><a href="checkout-style2.html" class="site-nav">Checkout Page Style2</a></li>
                            <li><a href="compare-style1.html" class="site-nav">Compare Page Style1</a></li>
                            <li><a href="compare-style2.html" class="site-nav last">Compare Page Style2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="lvl1 parent megamenu"><a href="product-layout1.html">Product <i class="an an-plus"></i></a>
                <ul>
                    <li><a href="product-layout1.html" class="site-nav">Product Page<i class="an an-plus"></i></a>
                        <ul>
                            <li><a href="product-layout1.html" class="site-nav">Product Layout1</a></li>
                            <li><a href="product-layout2.html" class="site-nav">Product Layout2</a></li>
                            <li><a href="product-layout3.html" class="site-nav">Product Layout3</a></li>
                            <li><a href="product-layout4.html" class="site-nav">Product Layout4</a></li>
                            <li><a href="product-layout5.html" class="site-nav">Product Layout5</a></li>
                            <li><a href="product-layout6.html" class="site-nav">Product Layout6</a></li>
                            <li><a href="product-layout7.html" class="site-nav">Product Layout7</a></li>
                            <li><a href="product-accordian.html" class="site-nav">Product Accordian</a></li>
                            <li><a href="product-tabs-left.html" class="site-nav">Product Tabs Left</a></li>
                            <li><a href="product-tabs-center.html" class="site-nav last">Product Tabs Center</a></li>
                        </ul>
                    </li>
                    <li><a href="short-description.html" class="site-nav">Product Page Types <i class="an an-plus"></i></a>
                        <ul>
                            <li><a href="product-standard.html" class="site-nav">Standard Product</a></li>
                            <li><a href="product-variable.html" class="site-nav">Variable Product</a></li>
                            <li><a href="product-grouped.html" class="site-nav">Grouped Product</a></li>
                            <li><a href="product-layout1.html" class="site-nav">New Product</a></li>
                            <li><a href="product-layout2.html" class="site-nav">Sale Product</a></li>
                            <li><a href="product-outofstock.html" class="site-nav">Out Of Stock Product</a></li>
                            <li><a href="product-external-affiliate.html" class="site-nav">External / Affiliate
                                Product</a></li>
                            <li><a href="product-layout1.html" class="site-nav">Variable Image</a></li>
                            <li><a href="product-layout4.html" class="site-nav">Variable Select</a></li>
                            <li><a href="prodcut-360-degree-view.html" class="site-nav last">360 Degree view</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="lvl1 parent megamenu"><a href="#">Lookbook <i class="an an-plus"></i></a>
                <ul>
                    <li><a href="lookbook-2columns.html" class="site-nav">2 Columns <span
                            class="lbl nm_label3">Popular</span></a></li>
                    <li><a href="lookbook-3columns.html" class="site-nav">3 Columns</a></li>
                    <li><a href="lookbook-4columns.html" class="site-nav">4 Columns</a></li>
                    <li><a href="lookbook-5columns.html" class="site-nav">5 Columns + Fullwidth</a></li>
                    <li><a href="lookbook-shop.html" class="site-nav last">Lookbook Shop</a></li>
                </ul>
            </li>
            <li class="lvl1 parent megamenu"><a href="about-us.html">Pages <i class="an an-plus"></i></a>
                <ul>
                    <li><a href="login.html" class="site-nav">Login</a></li>
                    <li><a href="my-account.html" class="site-nav">My Account</a></li>
                    <li><a href="aboutus-style1.html" class="site-nav">About Us <i class="an an-plus"></i></a>
                        <ul class="dropdown">
                            <li><a href="aboutus-style1.html" class="site-nav">About Us Style1</a></li>
                            <li><a href="aboutus-style2.html" class="site-nav">About Us Style2</a></li>
                        </ul>
                    </li>
                    <li><a href="contact-style1.html" class="site-nav">Contact Us <i class="an an-plus"></i></a>
                        <ul class="dropdown">
                            <li><a href="contact-style1.html" class="site-nav">Contact Us Style1</a></li>
                            <li><a href="contact-style2.html" class="site-nav">Contact Us Style2</a></li>
                        </ul>
                    </li>
                    <li><a href="faqs-style1.html" class="site-nav">FAQs <i class="an an-plus"></i></a>
                        <ul class="dropdown">
                            <li><a href="faqs-style1.html" class="site-nav">FAQs Style1</a></li>
                            <li><a href="faqs-style2.html" class="site-nav">FAQs Style2</a></li>
                        </ul>
                    </li>
                    <li><a href="cms.html" class="site-nav">CMS</a></li>
                    <li><a href="error-404.html" class="site-nav">Error 404</a></li>
                    <li><a href="coming-soon.html" class="site-nav">Coming soon</a></li>
                </ul>
            </li>
            <li class="lvl1 parent megamenu"><a href="blog-left-sidebar.html">Blog <i class="an an-plus"></i></a>
                <ul>
                    <li><a href="blog-left-sidebar.html" class="site-nav">Left Sidebar</a></li>
                    <li><a href="blog-right-sidebar.html" class="site-nav">Right Sidebar</a></li>
                    <li><a href="blog-fullwidth.html" class="site-nav">Fullwidth</a></li>
                    <li><a href="blog-2columns.html" class="site-nav">2 Columns <span
                            class="lbl nm_label3">Hot</span></a></li>
                    <li><a href="blog-3columns.html" class="site-nav">3 Columns</a></li>
                    <li><a href="blog-4columns.html" class="site-nav">4 Columns</a></li>
                    <li><a href="blog-single-post.html" class="site-nav">Single Post</a></li>
                </ul>
            </li>

        </ul>
    </div>
    <!--End Mobile Menu-->

    <script th:if="${currentUser != null}">
        // 注销功能
        document.addEventListener('DOMContentLoaded', function() {
            const logoutBtn = document.getElementById('logout-btn');
            if (logoutBtn) {
                logoutBtn.addEventListener('click', function() {
                    if (confirm('确定要注销吗？')) {
                        fetch('/user/logout', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                alert('注销成功');
                                window.location.reload();
                            } else {
                                alert('注销失败：' + (data.msg || '未知错误'));
                            }
                        })
                        .catch(error => {
                            console.error('注销出错:', error);
                            alert('注销出错，请重试');
                        });
                    }
                });
            }
        });
    </script>
</div>